<template>
  <el-table :data="tableData" :="$attrs" :header-cell-style="trStyle" class="commonTable m-t-10" height="500">
    <el-table-column
      v-if="checkable"
      type="selection"
      >
    </el-table-column>
    
    <el-table-column
    v-for="(col, index) in tableColumn"
    :="col"
    v-slot="scope"
    :key="index"
    >
      <slot :name="col.template" :="scope">
        {{ scope.row[scope.column.property] }}
      </slot>
    </el-table-column>
    
  </el-table>
  <el-pagination
  :page-sizes="[20, 40, 80, 100]"
  layout="total, sizes, prev, pager, next, jumper"
  :total="100" background>
  :pager-count="7">
  </el-pagination>
  
</template>

<script setup lang="ts">
import { useAttrs } from 'vue';
import { ITableColumn } from './modules/commonTbale';

defineProps({
  tableData: {
    default: [],
    type: Array
  },
  tableColumn: {
    default: [],
    type: Array<ITableColumn>
  },
  checkable: {
    default: false,
    type: Boolean
  },
})
const $attrs = useAttrs()

const trStyle = () => {
  return { background: '#f7fbff', color: '#000' }
}
</script>

<style lang="scss" scoped>
.commonTable {
  &::v-deep {
    .el-table__inner-wrapper:before {
      display: none;
    }
  }
}
</style>